import React, { createRef } from 'react';
import { MessageList } from 'react-chat-elements';
import { Button, Row, Col, Input } from 'antd';
import { io } from 'socket.io-client';

const { TextArea } = Input;

export class ChatWidget extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: this.props.user,
      last_user: undefined,
      msgDataList: undefined,
      socket: undefined,
      sendMsg: '',
    };
    this.clickButton = this.clickButton.bind(this);
    this.messagesEnd = createRef();
  }

  componentDidMount() {
    // 状态
    if (this.state.user == this.state.last_user && this.state.user != undefined) {
      console.log('没有切换用户，不做任何操作');
    } else {
      // 如果连接存在，关闭上一次连接
      if (this.socket) {
        this.socket.disconnect();
        this.socket = undefined;
      }
      // 建立websocket连接
      this.socket = io('http://127.0.0.1:81');
      this.socket.on('toFrontMessage', (data) => {
        let list = this.state.msgDataList;
        list.push({
          position: 'left',
          type: 'text',
          text: data.msg,
        });
        this.setState({ msgDataList: list });
      });
    }
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const last_user = this.state.user;
    this.setState({
      last_user,
      user: nextProps.user,
      msgDataList: nextProps.msgDataList,
    });
  }

  clickButton() {
    let list = this.state.msgDataList;
    list.push({
      position: 'right',
      type: 'text',
      text: this.state.sendMsg,
    });
    // 先join room
    this.socket.emit('frontConnect', {
      trailer_ID: this.state.user.title,
      user_ID: 'zhk001',
    });
    this.socket.emit('frontText', {
      trailer_ID: this.state.user.title,
      user_ID: 'zhk001',
      message_content: this.state.sendMsg,
    });
    this.setState({ msgDataList: list });
    this.setState({ sendMsg: '' });
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    this.messagesEnd.scrollTop = this.messagesEnd.scrollHeight;
  }

  render() {
    const { user, msgDataList } = this.state;
    return (
      <Col
        style={{
          width: '70%',
          height: 600,
          display: 'inline-block',
          borderRight: '3px solid',
          borderTop: '3px solid',
          borderBottom: '3px solid',
        }}
      >
        <Row>
          <Col
            style={{
              width: '100%',
              height: 40,
              textAlign: 'center',
              verticalAlign: 'middle',
              fontSize: 20,
            }}
          >
            {user == null ? '' : user.title}
          </Col>
        </Row>
        <Row>
          <div
            style={{
              width: '100%',
              height: 420,
              textAlign: 'center',
              verticalAlign: 'middle',
              fontSize: 20,
              overflow: 'auto',
              backgroundColor: '\t#C0C0C0',
            }}
            ref={(el) => {
              this.messagesEnd = el;
            }}
          >
            <MessageList className="message-list" dataSource={msgDataList} />
          </div>
        </Row>
        <Row>
          <Col
            style={{
              width: '100%',
              textAlign: 'center',
              verticalAlign: 'middle',
              fontSize: 20,
            }}
          >
            <TextArea
              rows={4}
              onChange={(e) => {
                this.setState({ sendMsg: e.target.value });
              }}
              ref={(el) => (this.inputRef = el)}
              value={this.state.sendMsg}
            />
            <Button type="primary" onClick={this.clickButton}>
              发送
            </Button>
          </Col>
        </Row>
      </Col>
    );
  }
}
